<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0; margin: 0; list-style-type: none;}
        .cont{ width: 1200px; height: 600px; margin: 0 auto; background-color: aliceblue; overflow: hidden; position: relative;}
        .ct{ transition: all 1s; width: auto; height: 600px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; transition: all 1s;}
        .ct img{ width: 100%; height: 100%; flex: none; display: block; object-fit: cover; transition:all 1s;  }
        .pagelist{ display: flex; flex-wrap: nowrap; width: 1200px; margin: 20px auto; justify-content: space-between;  align-items: center; overflow-x: scroll;}
        .pagelist img{border: 3px solid #eee; flex:none; cursor:context-menu;}
        .pagelist img.active{ border: 3px solid red;}
        .page{ position: absolute; width: 100%; height: 50px; top: 50%; left: 0; transform: translateY(-50%); text-align: center; display: flex;justify-content: space-between; align-items: center;}
        .page > div{ width: 50px; height: 100%; background-color: red; display: flex; justify-content: center; align-items: center;}
    </style>
</head>
<body>
    <div class="cont">
        <div class="ct">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
        </div>
        <div class="page">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </div>
    <ul  class="pagelist"></ul>
    <script type="text/javascript">
        let img = document.querySelectorAll('.ct img');
        let ctWidth = document.querySelector('.ct').offsetWidth;
        console.log(img);
        for(let i = 0; i < img.length; i++) {
            let imgs = document.createElement('img');
            let hrefs = img[i].getAttribute('src');
            imgs.setAttribute('src', hrefs);
            imgs.setAttribute('index', (i + 1));
            imgs.setAttribute('width', '120');
            imgs.setAttribute('height', '120');
            let pageli = document.querySelector('.pagelist');
            pageli.appendChild(imgs);
        }
        
        let thimeImg = document.querySelectorAll('.pagelist img');
        for(let i = 0; i < thimeImg.length; i++){
            thimeImg[i].addEventListener('mouseover',function(){
                clearInterval(timer);
                for(let j = 0; j < thimeImg.length; j++){
                    thimeImg[j].classList.remove('active');
                }
                this.classList.add('active');
                shoupic(this.getAttribute('index'));
            })
            thimeImg[i].addEventListener('mouseout',function(){
                timer();
            })
        }
        
        //展示图片
        function shoupic(indexNumse){
            let lefts = -((indexNumse-1) * ctWidth);
            console.log(lefts);
            document.querySelector('.ct').style.transform = 'translateX('+ lefts +'px)';
        }

        let timer = setInterval(function(){
            let indexNum = document.querySelector('.active').getAttribute('index');
            indexNum++;
            if(indexNum > img.length){
                indexNum = 1;
            }
            shoupic(indexNum);
            document.querySelector('.active').classList.remove('active');
            document.querySelector('.pagelist img:nth-child('+ indexNum +')').classList.add('active');
        },2000)
    </script>
</body>
</html>